<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/account-information.css" />
	</head>

	<body class="relative">
		<div id="header"></div>
		<div class="account-bg">
			<div class="container clearfix">
				<div class="account-tit">
					<a href="home-page.html">首页</a>
					<span class="icon-righthollo"></span>
					<span>账号信息</span>
				</div>
				<div id="personal-left"></div>
				<div class="account-rightlist fl">
					<ul class="rightlist-title clearfix">
						<li class="title-item fl active">基本资料</li>
						<li class="title-item fl">感兴趣的分类</li>
						<li class="title-item fl">我的尺码</li>
					</ul>
					<ul class="rightlist-content">
						<li class="basic-information">
							<form action="" class="userinfor">
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">用户头像</label>
									<div class="usercontent fl">
										<div class="useravator relative">
											<img src="img/personal-headportrait.jpg" />
											<div class="icon-pic absolute"></div>
											<div class="icon-mask absolute"></div>
										</div>
									</div>
								</div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">用户ID</label>
									<div class="usercontent fl">26143911871</div>
								</div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">帐　　号</label>
									<div class="usercontent fl">QQ</div>
								</div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">昵　　称</label>
									<div class="usercontent fl">
										<input class="nicheng" type="text" name="" id="" value="" placeholder="桨声灯影里" />
									</div>
								</div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">性　　别</label>
									<div class="usercontent fl clearfix">
										<div class="xingbie fl">
											<input class="radio" type="radio" name="sex" id="" value="" />
											<label for="" class="sex">男</label>
										</div>
										<div class="xingbie fl">
											<input class="radio" type="radio" name="sex" id="" value="" />
											<label for="" class="sex">女</label>
										</div>
									</div>
								</div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">手机号码</label>
									<div class="usercontent fl">
										<a href="#" class="userphone">绑定手机号码</a>
									</div>
								</div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">出生日期</label>
									<div class="usercontent fl">
										<div class="ymd">
											<select name="birthyear" class="userselect">
												<option value="">--</option>
												<option value="">2018</option>
												<option value="">2017</option>
												<option value="">2016</option>
												<option value="">2015</option>
												<option value="">2014</option>
												<option value="">2013</option>
												<option value="">2012</option>
												<option value="">2011</option>
												<option value="">2010</option>
												<option value="">2009</option>
												<option value="">2008</option>
												<option value="">2007</option>
												<option value="">2006</option>
												<option value="">2005</option>
												<option value="">2004</option>
												<option value="">2003</option>
												<option value="">2002</option>
												<option value="">2001</option>
												<option value="">2000</option>
												<option value="">1999</option>
												<option value="">1998</option>
												<option value="">1997</option>
												<option value="">1996</option>
												<option value="">1995</option>
												<option value="">1994</option>
												<option value="">1993</option>
												<option value="">1992</option>
												<option value="">1991</option>
												<option value="">1990</option>
												<option value="">1989</option>
											</select>
											<label for="" class="userunit">年</label>
											<select name="birthmonth" class="userselect">
												<option value="">--</option>
												<option value="">1</option>
												<option value="">2</option>
												<option value="">3</option>
												<option value="">4</option>
												<option value="">5</option>
												<option value="">6</option>
												<option value="">7</option>
												<option value="">8</option>
												<option value="">9</option>
												<option value="">10</option>
												<option value="">11</option>
												<option value="">12</option>
											</select>
											<label for="" class="userunit">月</label>
											<select name="birthday" class="userselect">
												<option value="">--</option>
												<option value="">1</option>
												<option value="">2</option>
												<option value="">3</option>
												<option value="">4</option>
												<option value="">5</option>
												<option value="">6</option>
												<option value="">7</option>
												<option value="">8</option>
												<option value="">9</option>
												<option value="">10</option>
												<option value="">11</option>
												<option value="">12</option>
												<option value="">13</option>
												<option value="">14</option>
												<option value="">15</option>
												<option value="">16</option>
												<option value="">17</option>
												<option value="">18</option>
												<option value="">19</option>
												<option value="">20</option>
												<option value="">21</option>
												<option value="">22</option>
												<option value="">23</option>
												<option value="">24</option>
												<option value="">25</option>
												<option value="">26</option>
												<option value="">27</option>
												<option value="">28</option>
												<option value="">29</option>
												<option value="">30</option>
												<option value="">31</option>
											</select>
											<label for="" class="userunit">日</label>
										</div>
									</div>
								</div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">在校大学生</label>
									<div class="usercontent fl">
										<span>
											<a href="" class="userphone">未认证</a>
										</span>
										<span style="margin-left: 10px;">
											<a href="" style="color: #999999;">什么是学生特权</a>
											<i class="icon-wenhao"></i>
										</span>
									</div>
								</div>
								<div class="solitline"></div>
								<div class="userinfor-item clearfix">
									<label for="" class="userlabel fl">&nbsp;</label>
									<div class="usercontent fl">
										<div class="baocunbtn relative">保存
											<div class="userzhezao absolute"></div>
										</div>
									</div>
								</div>
							</form>
						</li>
						<li class="intrested">
							<div class="intrestedbox">
								<div class="intrestedtip">多选几个，小选会推荐地更精准哦！</div>
								<div class="whatintrested clearfix">
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img1.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">床品被枕</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img2.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">餐厨用品</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img3.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">居家神器</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img4.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">家具家饰</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img5.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">鞋靴外搭</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img6.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">内衣裤袜</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img7.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">箱包差旅</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img8.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">洗护用品</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img9.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">办公文具</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img10.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">茶点零食</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img11.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">宠物用品</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img12.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">运动音乐</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img13.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">母婴用品</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img14.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">车载用品</span>
										</div>
									</div>
									<div class="intrested-item fl">
										<div class="item-cover relative">
											<img src="img/interested-img15.png" alt="" />
											<div class="intrestedzezhao absolute">
												<img src="img/interested-duigou.png" alt="" />
											</div>
										</div>
										<div class="item-des">
											<span>
												<input type="checkbox" />
											</span>
											<span style="margin-left: 10px;">智能硬件</span>
										</div>
									</div>
								</div>
								<div class="btnbox relative">
									<button type="button" class="subbtn">提交</button>
									<div class="btnmsg absolute">提交成功！</div>
								</div>
							</div>
						</li>
						<li class="my-size">
							<div class="sizebox">
								<div class="size-head clearfix">
									<span class="fl">最多可创建10个角色</span>
									<button class="xinjian fr" type="button">新建</button>
								</div>
								<div class="size-body">
									<table border="0" cellspacing="" cellpadding="">
										<thead>
											<tr>
												<th style="width: 93px;">角色</th>
												<th>身高cm</th>
												<th>体重kg</th>
												<th>肩宽cm</th>
												<th>胸围cm</th>
												<th>腰围cm</th>
												<th>臀围cm</th>
												<th>脚长cm</th>
												<th>脚围cm</th>
												<th style="width: 60px;"></th>
												<th style="width: 105px;"></th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td style="width: 93px;">我的尺码</td>
												<td>--</td>
												<td>--</td>
												<td>--</td>
												<td>--</td>
												<td>--</td>
												<td>--</td>
												<td>--</td>
												<td>--</td>
												<td style="width: 60px;"></td>
												<td style="width: 105px;">
													<p class="editbox">修改</p>
													<p class="delbox">删除</p>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="chimabox absolute relative">

			<div class="chimalist">
				<div class="guanbi absolute"></div>
				<div class="chimalist-tit">新建尺码</div>
				<div class="chimalist-content clearfix">
					<div class="imgWarp fl">
						<div class="imgDesc">测量参考</div>
						<img src="img/chima.png" alt="" />
					</div>
					<div class="formWarp fl">
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">角色名称</div>
							<div class="inputWarp">
								<input type="text" name="rolename" id="rolname" maxlength="5" value="我的尺码" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">身高(cm)</div>
							<div class="inputWarp">
								<input type="text" name="" id="height" maxlength="5" value="" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">体重(kg)</div>
							<div class="inputWarp">
								<input type="text" name="" id="weight" maxlength="5" value="" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">肩宽(cm)</div>
							<div class="inputWarp">
								<input type="text" name="" id="shoulderbreadth" maxlength="5" value="" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">胸围(cm)</div>
							<div class="inputWarp">
								<input type="text" name="" id="bust" maxlength="5" value="" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">腰围(cm)</div>
							<div class="inputWarp">
								<input type="text" name="" id="waistcircumference" maxlength="5" value="" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">臀围(cm)</div>
							<div class="inputWarp">
								<input type="text" name="" id="hipcircumference" maxlength="5" value="" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">脚长(cm)</div>
							<div class="inputWarp">
								<input type="text" name="" id="footlength" maxlength="5" value="" />
							</div>
						</div>
						<div class="m-sizeitem clearfix">
							<div class="m-sizelabel fl">脚围(cm)</div>
							<div class="inputWarp">
								<input type="text" name="" id="footcircumference" maxlength="5" value="" />
							</div>
						</div>
						<span class="formDesc">信息越完整，对您选择服饰时越有帮助</span>
						<div class="size-check">
							<input class="radio" type="radio" name="dft" id="" value="设为默认" />
							<span>设为默认</span>
						</div>
						<div class="size-buttonbox clearfix">
							<p class="baocun fl">保存</p>
							<!--<p class="save fl">保存</p>-->
							<p class="quxiao fl">取消</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer"></div>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/head-foot.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#a-i").addClass("active");
				$(".title-item").click(function() {
					var i = $(this).index();
					console.log(i);
					$(".title-item").removeClass("active");
					$(this).addClass("active");
					$(".rightlist-content li").css("display", "none");
					$(this).parent().siblings(".rightlist-content").children().eq(i).css("display", "block")
				});
				var flag = true;
				$(".intrested-item").click(function() {

					if(flag) {
						$(this).find(".intrestedzezhao").css("display", "block");
						$(this).find("input:checkbox").prop("checked", "checked");
						flag = false;
					} else {
						$(this).find(".intrestedzezhao").css("display", "none");
						$(this).find("input:checkbox").prop("checked", false);
						flag = true;
					}
				});
				$(".subbtn").click(function() {
					$(this).siblings(".btnmsg").fadeIn(2000, function() {
						$(".btnmsg").animate({
							opacity: 0
						}, 4000)
					});
				});
				//尺码盒子
				//点击新建显示
				$(".xinjian").click(function() {
					$(".chimabox").css("display", "block")
				});
				//点击叉号关闭盒子
				$(".guanbi").click(function() {
					$(".chimabox").css("display", "none")
				});
				//保存
				$(".baocun").click(function() {
					var rolename = $("#rolname").val();
					var height = $("#height").val();
					if(!height || height > 250) {
						alert("请输入有效身高");
						return;
					}
					var weight = $("#weight").val();
					if(!weight || weight > 800) {
						alert("请输入有效体重");
						return;
					}
					var shoulderbreadth = $("#shoulderbreadth").val();
					if(!shoulderbreadth || shoulderbreadth > 150) {
						alert("请输入有效肩宽");
						return;
					}
					var bust = $("#bust").val();
					if(!bust || bust > 150) {
						alert("请输入有效胸围");
						return;
					}
					var waistcircumference = $("#waistcircumference").val();
					if(!waistcircumference || waistcircumference > 150) {
						alert("请输入有效腰围");
						return;
					}
					var hipcircumference = $("#hipcircumference").val();
					if(!hipcircumference || hipcircumference > 150) {
						alert("请输入有效臀围");
						return;
					}
					var footlength = $("#footlength").val();
					if(!footlength || footlength > 40) {
						alert("请输入有效脚长");
						return;
					}
					var footcircumference = $("#footcircumference").val();
					if(!footcircumference || footcircumference > 30) {
						alert("请输入有效脚围");
						return;
					}
					var moren = $(".size-check input[type='radio']").is(':checked');
					//					console.log(rolename);
					//					console.log(height);
					//					console.log(weight);
					//					console.log(shoulderbreadth);
					//					console.log(bust);
					//					console.log(waistcircumference);
					//					console.log(hipcircumference);
					//					console.log(footlength);
					//					console.log(footcircumference);
					if(moren) {
						var $tr = $('<tr><td style="width: 93px;">' + rolename + '</td><td>' + height + '</td><td>' + weight + '</td><td>' + shoulderbreadth + '</td><td>' + bust + '</td><td>' + waistcircumference + '</td><td>' + hipcircumference + '</td><td>' + footlength + '</td><td>' + footcircumference + '</td><td style="width: 60px;"><span class="tag">默认</span></td><td style="width: 105px;"><p class="editbox">修改</p><p class="delbox">删除</p></td></tr>');
						$(".size-body tbody").prepend($tr);
						$(".inputWarp input").val("");
						$("#rolname").val("我的尺码");
						$(".chimabox").css("display", "none");
						$(".size-check input[type='radio']").removeAttr('checked');
					} else {
						var $tr = $('<tr><td style="width: 93px;">' + rolename + '</td><td>' + height + '</td><td>' + weight + '</td><td>' + shoulderbreadth + '</td><td>' + bust + '</td><td>' + waistcircumference + '</td><td>' + hipcircumference + '</td><td>' + footlength + '</td><td>' + footcircumference + '</td><td style="width: 60px;"></td><td style="width: 105px;"><p class="editbox">修改</p><p class="delbox">删除</p></td></tr>');
						$(".size-body tbody").prepend($tr);
						$(".inputWarp input").val("");
						$("#rolname").val("我的尺码");
						$(".chimabox").css("display", "none")
					}

				});
				//取消
				$(".quxiao").click(function() {
					$(".inputWarp input").val("");
					$("#rolname").val("我的尺码");
					$(".chimabox").css("display", "none")
				});
				//删除尺码
				$(".size-body tbody").on("click", ".delbox", function() {
					$(this).parents("tr").remove();
				});
				//修改返还
				$(".size-body tbody").on("click", ".editbox", function() {
					var i = $(this).parent().index();
					var p1 = $(this).parents("tr").children().eq(i-10).text();
					var p2 = $(this).parents("tr").children().eq(i-9).text();
					var p3 = $(this).parents("tr").children().eq(i-8).text();
					var p4 = $(this).parents("tr").children().eq(i-7).text();
					var p5 = $(this).parents("tr").children().eq(i-6).text();
					var p6 = $(this).parents("tr").children().eq(i-5).text();
					var p7 = $(this).parents("tr").children().eq(i-4).text();
					var p8 = $(this).parents("tr").children().eq(i-3).text();
					var p9 = $(this).parents("tr").children().eq(i-2).text();
					$(".chimabox").css("display","block");
					$("#rolname").val(p1);
					$("#height").val(p2);
					$("#weight").val(p3);
					$("#shoulderbreadth").val(p4);
					$("#bust").val(p5);
					$("#waistcircumference").val(p6);
					$("#hipcircumference").val(p7);
					$("#footlength").val(p8);
					$("#footcircumference").val(p9);
					//隐藏保存按钮，显示save按钮
//					$(".baocun").css("display","none");
//					$(".save").css("display","inline-block");
					//删除原先的
					$(this).parents("tr").remove();
				});
				
			});
		</script>
	</body>

</html>